<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="org.jakim.entity.*"%>
<%@ page import="org.jakim.utils.*"%>
<!DOCTYPE html>
<fmt:setLocale value="bg" />
<fmt:setBundle basename="org.jakim.messages.messages" scope="session" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/DatePicker/scw.js"></script>
<script type="text/javascript"> 
function validateForm()
{
	var p1 = document.getElementById('txtUserPassword');
	var p2 = document.getElementById('txtUserConfirmPassword');

    if (p1.value == null || p1.value  == ""){
    	p1.style.backgroundColor = "#FF0000 ";
    	p2.style.backgroundColor = "#FF0000 ";
        alert('<fmt:message key="REGISTRATION.FORM.USEREMAIL.LABEL" />');
        p2.value = p1.value = "";
        return false;
    } 
    
    if (p2.value == "" || p1.value != p2.value){
    	p1.style.backgroundColor = "#FF0000 ";
    	p2.style.backgroundColor = "#FF0000 ";
        alert('<fmt:message key="REGISTRATION.FORM.USEREMAIL.LABEL" />');
        p2.value = p1.value = "";
        return false;
    }
    
    else return p2.value == p1.value;
}

function clearPaswdBckg(){
	var p1 = document.getElementById('txtUserPassword');
	var p2 = document.getElementById('txtUserConfirmPassword');

	p1.style.backgroundColor = "#FFFFFF ";
	p2.style.backgroundColor = "#FFFFFF ";
} 

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link href="js/DatePicker/datepick.css" rel="stylesheet" type="text/css" />
<link href="styles/registration.css" rel="stylesheet" type="text/css" />
<title>Insert title here</title>
</head>
<body>
	<div id="divBodyContainer">
		<section id="divRegistrationContainer">
			<form id="formRegistration" name="formRegistration" method="post" 
				action="register" onsubmit="return validateForm()">
				<fieldset id="fsetRegistration">
					<legend>
						<fmt:message key="REGISTRATION.FORM.LABEL" />:
					</legend>

					<div>
						<label id="lblUserEmail" for="txtUserEmail"> <fmt:message
								key="REGISTRATION.FORM.USEREMAIL.LABEL" />:
						</label> <input type="email" name="userEmail" id="txtUserEmail"
							maxlength="30" required placeholder="Enter a valid email address" />
					</div>

					<div>
						<label id="lblUserPassword" for="txtUserPassword"> <fmt:message
								key="REGISTRATION.FORM.USERPASSWORD.LABEL" />:
						</label> <input type="password" name="userPassword" id="txtUserPassword"
							maxlength="30" required onfocus="clearPaswdBckg()" />
					</div>

					<div>
						<label id="lblUserConfirmConfirmPassword"
							for="txtUserConfirmPassword"> <fmt:message
								key="REGISTRATION.FORM.USERCONFIRMPASSWORD.LABEL" />:
						</label> <input type="password" name="userConfirmPassword"
							id="txtUserConfirmPassword" maxlength="30" required onfocus="clearPaswdBckg()"/>
					</div>

					<div>
						<input type="submit"
							value="<fmt:message key='REGISTRATION.FORM.SUBMIT.LABEL' />" />
					</div>
				</fieldset>
			</form>
		</section>
		<!-- End of RegistraionContainer  -->
	</div>
	<!-- End of BodyContaner -->

	<footer id="divFooterContainer"></footer>
</body>
</html>